<template>
  <el-table :data="valueData">
    <el-table-column v-for="column in columns" :key="column.value" :prop="column.value" :label="column.label"  header-align="center">
      <template v-if="$slots[column.value]" v-slot="{ row }">
        <slot :name="column.value" :row="row"></slot>
      </template>
      <template v-else v-slot="{ row }">
        <span>{{ row[column.value] }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="optrations" label="操作" fixed="right" header-align="center" align="center" >
      <template v-slot="scope">
        <span v-for=" (item , index) in optrations">
          <span v-if="index !==0 && optrations.length > 1" class="cutof">|</span>
          <el-button :type="item.type" @click="item.method(scope.columns,scope.row)" link>
            <span>{{ item.name }}</span>
          </el-button>
        </span>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-pagination v-if=" pageCurrent && pageCurrent.total > 10" :current-page="pageCurrent.pageNum" :page-sizes="[10, 20, 50]"
      :page-size="pageCurrent.pageSize" :total="Number(pageCurrent.total)" layout=" slot,sizes, prev, pager, next"
      @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
      <span>
        共 {{pageCurrent.total}} 条
      </span>
    </el-pagination>
  </div>

</template>

<script>
  import { defineComponent } from 'vue';

  export default defineComponent({
    props: {
      columns: {
        type: Array,
        required: true
      },
      valueData: {
        type: Array,
        required: true
      },
      optrations: {
        type: Array,
        required: true
      },
      Pagination: {
        default: true,
        type: Boolean,
        required: false
      },
      pageCurrent: {
        type: Array,
        required: false
      }
    },
    setup (props, ctx) {
      const pageSizeChangeHandle = (val) => {
        ctx.emit('pageSize', val)
      }
      const pageCurrentChangeHandle = (val) => {
        ctx.emit('currentPage', val)
      }
      return { pageSizeChangeHandle, pageCurrentChangeHandle };
    }
  });
</script>
<style>
  .el-table--default .cell {
    text-align: center;
  }
</style>